<template>
  <div class="soft-page">
    <!-- 顶部面包屑 -->
    <div class="breadcrumb">工作协同 / 软件列表</div>

    <!-- 查询区 -->
    <el-card class="toolbar" shadow="never">
      <el-form :inline="true" :model="query" class="filter-form">
        <el-form-item label="软件">
          <el-input v-model="query.keyword" placeholder="请输入编号" clearable style="width:240px" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="query.category" placeholder="全部" style="width:160px">
            <el-option label="全部" value="" />
            <el-option label="视频剪辑" value="视频剪辑" />
            <el-option label="图文编辑" value="图文编辑" />
            <el-option label="文案工具" value="文案工具" />
            <el-option label="其他工具" value="其他工具" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.status" placeholder="全部" style="width:160px">
            <el-option label="全部" value="" />
            <el-option label="已上线" value="已上线" />
            <el-option label="待上线" value="待上线" />
          </el-select>
        </el-form-item>

        <div class="spacer"></div>

        <el-button type="primary" :icon="Search" @click="doSearch">查询</el-button>
        <el-button :icon="RefreshRight" @click="reset">重置</el-button>
      </el-form>

      <div class="toolbar-actions">
        <el-button type="primary" :icon="Plus" @click="goCreate">新建</el-button>
        <el-button :icon="Upload">批量导入</el-button>
        <span class="total">共 {{ total }} 条</span>
      </div>
    </el-card>

    <!-- 列表区 -->
    <el-card class="list-card" shadow="never">
      <template v-if="paged.length">
      <el-table :data="paged" border stripe v-loading="loading">
        <el-table-column type="selection" width="58" label="选择" />
        <el-table-column prop="index" label="序号" width="70" />
        <el-table-column label="图标" width="90">
          <template #default="scope">
            <img class="soft-icon" :src="scope.row.icon" alt="图标" @error="hide" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="软件名称" min-width="160" />
        <el-table-column prop="category" label="软件分类" width="120" />
        <el-table-column prop="size" label="软件大小" width="110" />
        <el-table-column prop="downloads" label="下载次数" width="100" />
        <el-table-column label="评分" width="140">
          <template #default="scope">
            <el-rate v-model="scope.row.rate" disabled show-score score-template="{value}分" />
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建日期" width="160" />
        <el-table-column prop="status" label="状态" width="110">
          <template #default="scope">
            <span :class="['status', scope.row.status === '已上线' ? 'on' : 'pending']">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="scope">
            <el-button type="primary" link>查看</el-button>
            <el-button type="primary" link>分享</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="onPage"
        />
      </div>
      </template>

      <div v-else class="empty">
        <img class="empty-illu" :src="emptySoftImg" alt="empty" @error="hide" />
        <div class="empty-text">暂无内容</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, RefreshRight, Plus, Upload } from '@element-plus/icons-vue'
import api from '../api'
import { useRouter } from 'vue-router'
import emptySoftImg from '../assets/EmptySoft.png'
import payImg from '../assets/pay.png'

const query = ref({ keyword: '', category: '', status: '' })
const page = ref(1)
const pageSize = 12
const router = useRouter()
const loading = ref(false)

const all = ref([
  // 12 行占位数据，与截图相近
  { index: 1,  icon: payImg, name: 'XXXXXXXXXX……', category: '视频剪辑', size: '524.3MB', downloads: 3,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 2,  icon: payImg, name: 'XXXXXXXXXX……', category: '图文编辑', size: '524.3MB', downloads: 4,  rate: 0, createdAt: '2025-09-04 09:30', status: '待上线' },
  { index: 3,  icon: payImg, name: 'XXXXXXXXXX……', category: '文案工具', size: '524.3MB', downloads: 6,  rate: 3, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 4,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 3,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 5,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 0,  rate: 5, createdAt: '2025-09-04 09:30', status: '待上线' },
  { index: 6,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 3,  rate: 4, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 7,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 13, rate: 3, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 8,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 2,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index: 9,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 6,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index:10,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 4,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index:11,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 2,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
  { index:12,  icon: payImg, name: 'XXXXXXXXXX……', category: '其他工具', size: '524.3MB', downloads: 4,  rate: 0, createdAt: '2025-09-04 09:30', status: '已上线' },
])

async function fetchList(){
  loading.value = true
  try{
    const params = {
      page: page.value,
      pageSize,
      keyword: query.value.keyword || undefined,
      category: query.value.category || undefined,
      status: query.value.status || undefined,
    }
    const { data } = await api.get('/api/software', { params })
    const respData = data?.data || data || {}
    const items = respData.list || respData.items || []
    total.value = respData.total ?? items.length
    // 映射后端数据到现有字段
    all.value = items.map((it, idx) => ({
      index: it.index ?? idx + 1 + (page.value - 1) * pageSize,
      icon: it.icon_url || payImg,
      name: it.name || it.title || '',
      category: it.category || '',
      size: it.size || (it.size_bytes ? (Math.round(it.size_bytes/1024/1024*10)/10) + 'MB' : '—'),
      downloads: it.downloads ?? 0,
      rate: it.rate ?? 0,
      createdAt: it.created_at || it.createdAt || '',
      status: it.status || '已上线'
    }))
  } finally{
    loading.value = false
  }
}
onMounted(fetchList)

const filtered = computed(() => {
  return all.value.filter(r => {
    const hitKeyword = !query.value.keyword || r.name.includes(query.value.keyword)
    const hitCat = !query.value.category || r.category === query.value.category
    const hitStatus = !query.value.status || r.status === query.value.status
    return hitKeyword && hitCat && hitStatus
  })
})
const total = ref(0)
const paged = computed(() => all.value)

async function doSearch(){ page.value = 1; await fetchList() }
async function reset(){ query.value = { keyword:'', category:'', status:'' }; page.value = 1; await fetchList() }
function onPage(p){ page.value = p; fetchList() }
function hide(e){ e.target.style.opacity = 0 }
function goCreate(){ router.push('/collab/software/create') }
</script>

<style scoped>
.soft-page{ padding: 14px; }
.breadcrumb{ color:#8a8a8a; font-size:12px; margin-bottom:8px; }

.toolbar{ margin-bottom:12px; }
.filter-form{ display:flex; align-items:center; gap:12px; }
.spacer{ flex:1; }

.toolbar-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.toolbar-actions .total{
  margin-left:auto;
  color:#8a8a8a;
}

.list-card{ border-radius:10px; overflow:hidden; }

.soft-icon{
  width:28px; height:28px; border-radius:6px; object-fit:cover;
}

.status{ font-weight:600; }
.status.on{ color:#409EFF; }
.status.pending{ color:#F56C6C; }

.pagination{
  display:flex; justify-content:flex-end; margin-top:12px;
}

/* 空状态样式 */
.empty{
  height: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#333;
}
.empty-illu{
  width: 280px;
  max-width: 60vw;
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
}
.empty-text{
  font-size: 14px;
  color: #8a8a8a;
}
</style>